

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

	<title>Canvas Admin - Buttons & Icons</title>

	<meta charset="utf-8" />
	<meta name="description" content="" />
	<meta name="author" content="" />		
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet" type="text/css" />	
	<link rel="stylesheet" href="stylesheets/all.css" type="text/css" />
	<link rel="stylesheet" href="stylesheets/sample_pages/buttons-icons.css" type="text/css" />
	
	<!--[if gte IE 9]>
	<link rel="stylesheet" href="stylesheets/ie9.css" type="text/css" />
	<![endif]-->
	
	<!--[if gte IE 8]>
	<link rel="stylesheet" href="stylesheets/ie8.css" type="text/css" />
	<![endif]-->
	

</head>

<body>

<div id="wrapper">
	
	<div id="header">
		<h1><a href="dashboard.html">Canvas Admin</a></h1>		
		<a href="javascript:;" id="reveal-nav">
			<span class="reveal-bar"></span>
			<span class="reveal-bar"></span>
			<span class="reveal-bar"></span>
		</a>
	</div> <!-- #header -->
	
	<div id="search">
		<form>
			<input type="text" name="search" placeholder="Search..." id="searchField" />
		</form>		
	</div> <!-- #search -->
	
	<div id="sidebar">		
		
		<ul id="mainNav">			
			<li id="navDashboard" class="nav">
				<span class="icon-home"></span>
				<a href="dashboard.html">Dashboard</a>				
			</li>
						
			<li id="navPages" class="nav">
				<span class="icon-document-alt-stroke"></span>
				<a href="javascript:;">Sample Pages</a>			
				
				<ul class="subNav">
					<li><a href="invoice.html">Invoice</a></li>
					<li><a href="support.html">Support</a></li>
					<li><a href="people.html">People Directory</a></li>
					<li><a href="calendar.html">Calendar</a></li>
					<li><a href="stream.html">Stream</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="reports.html">Reports</a></li>
				</ul>						
			</li>	
			
			<li id="navForms" class="nav">
				<span class="icon-article"></span>
				<a href="javascript:;">Form Elements</a>
				
				<ul class="subNav">
					<li><a href="forms.html">Layouts & Elements</a></li>
					<li><a href="forms-validations.html">Validations</a></li>					
				</ul>	
			</li>
			
			<li id="navType" class="nav">
				<span class="icon-info"></span>
				<a href="typography.html">Typography</a>	
			</li>
			
			<li id="navGrid" class="nav">
				<span class="icon-layers"></span>
				<a href="grids.html">Grid Layout</a>
			</li>
			
			<li id="navTables" class="nav">
				<span class="icon-list"></span>
				<a href="tables.html">Tables</a>
			</li>
			
			<li id="navButtons" class="nav active">
				<span class="icon-compass"></span>
				<a href="buttons.html">Buttons & Icons</a>	
			</li>
			
			<li id="navInterface" class="nav">
				<span class="icon-equalizer"></span>
				<a href="interface.html">Interface Elements</a>	
			</li>
			
			<li id="navCharts" class="nav">
				<span class="icon-chart"></span>
				<a href="charts.html">Charts & Graphs</a>
			</li>
			
			<li id="navMaps" class="nav">
				<span class="icon-map-pin-fill"></span>
				<a href="maps.html">Map Elements</a>
			</li>
			
			<li class="nav">
				<span class="icon-denied"></span>
				<a href="javascript:;">Error Pages</a>
				
				<ul class="subNav">
					<li><a href="error-401.html">401 Page</a></li>
					<li><a href="error-403.html">403 Page</a></li>
					<li><a href="error-404.html">404 Page</a></li>	
					<li><a href="error-500.html">500 Page</a></li>	
					<li><a href="error-503.html">503 Page</a></li>					
				</ul>	
			</li>
		</ul>
				
	</div> <!-- #sidebar -->
	
	<div id="content">		
		
		<div id="contentHeader">
			<h1>Buttons & Icons</h1>
		</div> <!-- #contentHeader -->	
		
		<div class="container">
			
			<div class="row">
				
				<div class="grid-24">
					
					
					<div class="widget">
						
						<div class="widget-header">
							<span class="icon-compass"></span>
							<h3>Buttons w/ Icons (176 total icons)</h3>
						</div> <!-- .widget-header -->
						
						
						<div class="widget-content">
							
							
							<button class="btn btn-primary"><span class="icon-home"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-dial"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-download"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-eject"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-eyedropper"></span>Button</button>
							<button class="btn btn-primary"><span class="icon-folder-stroke"></span>Button</button>
							<button class="btn btn-primary"><span class="icon-iphone"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-last"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-layers"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-link"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-loop"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-mail"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-map-pin-fill-pin-alt"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-move-horizontal"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-move-vertical"></span>Button</button>
							
							<button class="btn btn-primary"><span class="icon-arrow-curved"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-compass"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-comment-fill"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-denied-alt"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-key-fill"></span>Button</button>
							<button class="btn btn-primary"><span class="icon-image"></span>Button</button>
							<button class="btn btn-primary"><span class="icon-info"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-hash"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-headphones"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-left-quote"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-lightbulb"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-mic"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-move"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-moon-fill"></span>Button</button>
							<button class="btn btn-primary "><span class="icon-mail-alt"></span>Button</button>
							
						</div> <!-- .widget-content -->
						
					</div> <!-- .widget -->
					
					
					
					<div class="widget">
						
						<div class="widget-header">
							<span class="icon-compass"></span>
							<h3>Button Sizes</h3>
						</div> <!-- .widget-header -->
						
						
						<div class="widget-content">
								
							<h4>Regular</h4>						
							<button class="btn btn-small">Small Button</button>
							<button class="btn">Regular Button</button>
							<button class="btn btn-large">Large Button</button>
							<button class="btn btn-xlarge">X-Large Button</button>
											
							<br />	
								
							<h4>With Icon Sizes</h4>						
							<button class="btn btn-small btn-quaternary"><span class="icon-home"></span>Small w/ Icon</button>
							<button class="btn btn-quaternary"><span class="icon-home"></span>Regular w/ Icon</button>
							<button class="btn btn-quaternary btn-large"><span class="icon-home"></span>Large w/ Icon</button>
							<button class="btn btn-quaternary btn-xlarge"><span class="icon-home"></span>X-Large w/ Icon</button>
							
						</div> <!-- .widget-content -->
						
					</div> <!-- .widget -->
					
					
					
					
					
					<div class="widget">
						
						<div class="widget-header">
							<span class="icon-compass"></span>
							<h3>Button Colors</h3>
						</div> <!-- .widget-header -->
						
						
						<div class="widget-content">
							
							<button class="btn btn-large btn-orange">Orange Button</button>
							<button class="btn btn-large btn-red">Red Button</button>
							<button class="btn btn-large btn-blue">Blue Button</button>
							<button class="btn btn-large btn-green">Green Button</button>
							<button class="btn btn-large btn-purple">Purple Button</button>
							<button class="btn btn-large btn-teal">Teal Button</button>
							<button class="btn btn-large btn-pink">Pink Button</button>
							<button class="btn btn-large btn-black">Black Button</button>
							<button class="btn btn-large btn-gray">Gray Button</button>
							
						</div> <!-- .widget-content -->
						
					</div> <!-- .widget -->
					
					
					
					
					<div class="widget">
						
						<div class="widget-header">
							<span class="icon-compass"></span>
							<h3>Semantic Color Classes (4 total)</h3>
						</div> <!-- .widget-header -->
						
						
						<div class="widget-content">
							
							<button class="btn btn-primary">Primary Button</button>
							<button class="btn btn-secondary">Secondary Button</button>
							<button class="btn btn-tertiary">Tertiary Button</button>
							<button class="btn btn-quaternary">Quaternary Button</button>
							
							<br /><br />
							
							<button class="btn btn-success">Success Button</button>
							<button class="btn btn-warning">Warning Button</button>
							<button class="btn btn-error">Error Button</button>
							
						</div> <!-- .widget-content -->
						
					</div> <!-- .widget -->
					
					
					<div class="widget">
						
						<div class="widget-header">
							<span class="icon-compass"></span>
							<h3>Icons</h3>
						</div> <!-- .widget-header -->
						
						<div class="widget-content">
							<div class="icons-container">
<div class="icons-holder"><span class="icon-ampersand"></span>.icon-ampersand</div>
<div class="icons-holder"><span class="icon-aperture"></span>.icon-aperture</div>
<div class="icons-holder"><span class="icon-aperture-alt"></span>.icon-aperture-alt</div>
<div class="icons-holder"><span class="icon-arrow-down"></span>.icon-arrow-down</div>
<div class="icons-holder"><span class="icon-arrow-down-alt1"></span>.icon-arrow-down-alt1</div>
<div class="icons-holder"><span class="icon-arrow-down-alt2"></span>.icon-arrow-down-alt2</div>
<div class="icons-holder"><span class="icon-arrow-left"></span>.icon-arrow-left</div>
<div class="icons-holder"><span class="icon-arrow-left-alt1"></span>.icon-arrow-left-alt1</div>
<div class="icons-holder"><span class="icon-arrow-left-alt2"></span>.icon-arrow-left-alt2</div>
<div class="icons-holder"><span class="icon-arrow-right"></span>.icon-arrow-right</div>
<div class="icons-holder"><span class="icon-arrow-right-alt1"></span>.icon-arrow-right-alt1</div>
<div class="icons-holder"><span class="icon-arrow-right-alt2"></span>.icon-arrow-right-alt2</div>
<div class="icons-holder"><span class="icon-arrow-up"></span>.icon-arrow-up</div>
<div class="icons-holder"><span class="icon-arrow-up-alt1"></span>.icon-arrow-up-alt1</div>
<div class="icons-holder"><span class="icon-arrow-up-alt2"></span>.icon-arrow-up-alt2</div>
<div class="icons-holder"><span class="icon-article"></span>.icon-article</div>
<div class="icons-holder"><span class="icon-at"></span>.icon-at</div>
<div class="icons-holder"><span class="icon-award-fill"></span>.icon-award-fill</div>
<div class="icons-holder"><span class="icon-award-stroke"></span>.icon-award-stroke</div>
<div class="icons-holder"><span class="icon-bars"></span>.icon-bars</div>
<div class="icons-holder"><span class="icon-bars-alt"></span>.icon-bars-alt</div>
<div class="icons-holder"><span class="icon-battery-charging"></span>.icon-battery-charging</div>
<div class="icons-holder"><span class="icon-battery-empty"></span>.icon-battery-empty</div>
<div class="icons-holder"><span class="icon-battery-full"></span>.icon-battery-full</div>
<div class="icons-holder"><span class="icon-battery-half"></span>.icon-battery-half</div>
<div class="icons-holder"><span class="icon-beaker"></span>.icon-beaker</div>
<div class="icons-holder"><span class="icon-beaker-alt"></span>.icon-beaker-alt</div>
<div class="icons-holder"><span class="icon-bolt"></span>.icon-bolt</div>
<div class="icons-holder"><span class="icon-book"></span>.icon-book</div>
<div class="icons-holder"><span class="icon-book-alt"></span>.icon-book-alt</div>
<div class="icons-holder"><span class="icon-box"></span>.icon-box</div>
<div class="icons-holder"><span class="icon-brush"></span>.icon-brush</div>
<div class="icons-holder"><span class="icon-brush-alt"></span>.icon-brush-alt</div>
<div class="icons-holder"><span class="icon-calendar"></span>.icon-calendar</div>
<div class="icons-holder"><span class="icon-calendar-alt-fill"></span>.icon-calendar-alt-fill</div>
<div class="icons-holder"><span class="icon-calendar-alt-stroke"></span>.icon-calendar-alt-stroke</div>
<div class="icons-holder"><span class="icon-camera"></span>.icon-camera</div>
<div class="icons-holder"><span class="icon-cd"></span>.icon-cd</div>
<div class="icons-holder"><span class="icon-chart"></span>.icon-chart</div>
<div class="icons-holder"><span class="icon-chart-alt"></span>.icon-chart-alt</div>
<div class="icons-holder"><span class="icon-chat"></span>.icon-chat</div>
<div class="icons-holder"><span class="icon-chat-alt-fill"></span>.icon-chat-alt-fill</div>
<div class="icons-holder"><span class="icon-chat-alt-stroke"></span>.icon-chat-alt-stroke</div>
<div class="icons-holder"><span class="icon-check"></span>.icon-check</div>
<div class="icons-holder"><span class="icon-check-alt"></span>.icon-check-alt</div>
<div class="icons-holder"><span class="icon-clock"></span>.icon-clock</div>
<div class="icons-holder"><span class="icon-cloud"></span>.icon-cloud</div>
<div class="icons-holder"><span class="icon-cloud-download"></span>.icon-cloud-download</div>
<div class="icons-holder"><span class="icon-cloud-upload"></span>.icon-cloud-upload</div>
<div class="icons-holder"><span class="icon-cog"></span>.icon-cog</div>
<div class="icons-holder"><span class="icon-cog-alt"></span>.icon-cog-alt</div>
<div class="icons-holder"><span class="icon-comment-alt1-fill"></span>.icon-comment-alt1-fill</div>
<div class="icons-holder"><span class="icon-comment-alt1-stroke"></span>.icon-comment-alt1-stroke</div>
<div class="icons-holder"><span class="icon-comment-alt2-fill"></span>.icon-comment-alt2-fill</div>
<div class="icons-holder"><span class="icon-comment-alt2-stroke"></span>.icon-comment-alt2-stroke</div>
<div class="icons-holder"><span class="icon-comment-alt3-fill"></span>.icon-comment-alt3-fill</div>
<div class="icons-holder"><span class="icon-comment-alt3-stroke"></span>.icon-comment-alt3-stroke</div>
<div class="icons-holder"><span class="icon-comment-fill"></span>.icon-comment-fill</div>
<div class="icons-holder"><span class="icon-comment-stroke"></span>.icon-comment-stroke</div>
<div class="icons-holder"><span class="icon-compass"></span>.icon-compass</div>
<div class="icons-holder"><span class="icon-cursor"></span>.icon-cursor</div>
<div class="icons-holder"><span class="icon-curved-arrow"></span>.icon-curved-arrow</div>
<div class="icons-holder"><span class="icon-denied"></span>.icon-denied</div>
<div class="icons-holder"><span class="icon-denied-alt"></span>.icon-denied-alt</div>
<div class="icons-holder"><span class="icon-dial"></span>.icon-dial</div>
<div class="icons-holder"><span class="icon-document-alt-fill"></span>.icon-document-alt-fill</div>
<div class="icons-holder"><span class="icon-document-alt-stroke"></span>.icon-document-alt-stroke</div>
<div class="icons-holder"><span class="icon-document-fill"></span>.icon-document-fill</div>
<div class="icons-holder"><span class="icon-document-stroke"></span>.icon-document-stroke</div>
<div class="icons-holder"><span class="icon-download"></span>.icon-download</div>
<div class="icons-holder"><span class="icon-eject"></span>.icon-eject</div>
<div class="icons-holder"><span class="icon-equalizer"></span>.icon-equalizer</div>
<div class="icons-holder"><span class="icon-eye"></span>.icon-eye</div>
<div class="icons-holder"><span class="icon-eyedropper"></span>.icon-eyedropper</div>
<div class="icons-holder"><span class="icon-first"></span>.icon-first</div>
<div class="icons-holder"><span class="icon-folder-fill"></span>.icon-folder-fill</div>
<div class="icons-holder"><span class="icon-folder-stroke"></span>.icon-folder-stroke</div>
<div class="icons-holder"><span class="icon-fork"></span>.icon-fork</div>
<div class="icons-holder"><span class="icon-fullscreen"></span>.icon-fullscreen</div>
<div class="icons-holder"><span class="icon-fullscreen-alt"></span>.icon-fullscreen-alt</div>
<div class="icons-holder"><span class="icon-fullscreen-exit"></span>.icon-fullscreen-exit</div>
<div class="icons-holder"><span class="icon-fullscreen-exit-alt"></span>.icon-fullscreen-exit-alt</div>
<div class="icons-holder"><span class="icon-hash"></span>.icon-hash</div>
<div class="icons-holder"><span class="icon-headphones"></span>.icon-headphones</div>
<div class="icons-holder"><span class="icon-heart-fill"></span>.icon-heart-fill</div>
<div class="icons-holder"><span class="icon-heart-stroke"></span>.icon-heart-stroke</div>
<div class="icons-holder"><span class="icon-home"></span>.icon-home</div>
<div class="icons-holder"><span class="icon-image"></span>.icon-image</div>
<div class="icons-holder"><span class="icon-info"></span>.icon-info</div>
<div class="icons-holder"><span class="icon-iphone"></span>.icon-iphone</div>
<div class="icons-holder"><span class="icon-key-fill"></span>.icon-key-fill</div>
<div class="icons-holder"><span class="icon-key-stroke"></span>.icon-key-stroke</div>
<div class="icons-holder"><span class="icon-last"></span>.icon-last</div>
<div class="icons-holder"><span class="icon-layers"></span>.icon-layers</div>
<div class="icons-holder"><span class="icon-layers-alt"></span>.icon-layers-alt</div>
<div class="icons-holder"><span class="icon-left-quote"></span>.icon-left-quote</div>
<div class="icons-holder"><span class="icon-left-quote-alt"></span>.icon-left-quote-alt</div>
<div class="icons-holder"><span class="icon-lightbulb"></span>.icon-lightbulb</div>
<div class="icons-holder"><span class="icon-link"></span>.icon-link</div>
<div class="icons-holder"><span class="icon-list"></span>.icon-list</div>
<div class="icons-holder"><span class="icon-lock-fill"></span>.icon-lock-fill</div>
<div class="icons-holder"><span class="icon-lock-stroke"></span>.icon-lock-stroke</div>
<div class="icons-holder"><span class="icon-loop"></span>.icon-loop</div>
<div class="icons-holder"><span class="icon-loop-alt1"></span>.icon-loop-alt1</div>
<div class="icons-holder"><span class="icon-loop-alt2"></span>.icon-loop-alt2</div>
<div class="icons-holder"><span class="icon-loop-alt3"></span>.icon-loop-alt3</div>
<div class="icons-holder"><span class="icon-loop-alt4"></span>.icon-loop-alt4</div>
<div class="icons-holder"><span class="icon-magnifying-glass"></span>.icon-magnifying-glass</div>
<div class="icons-holder"><span class="icon-magnifying-glass-alt"></span>.icon-magnifying-glass-alt</div>
<div class="icons-holder"><span class="icon-mail"></span>.icon-mail</div>
<div class="icons-holder"><span class="icon-mail-alt"></span>.icon-mail-alt</div>
<div class="icons-holder"><span class="icon-map-pin-alt"></span>.icon-map-pin-alt</div>
<div class="icons-holder"><span class="icon-map-pin-fill"></span>.icon-map-pin-fill</div>
<div class="icons-holder"><span class="icon-map-pin-stroke"></span>.icon-map-pin-stroke</div>
<div class="icons-holder"><span class="icon-mic"></span>.icon-mic</div>
<div class="icons-holder"><span class="icon-minus"></span>.icon-minus</div>
<div class="icons-holder"><span class="icon-minus-alt"></span>.icon-minus-alt</div>
<div class="icons-holder"><span class="icon-moon-fill"></span>.icon-moon-fill</div>
<div class="icons-holder"><span class="icon-moon-stroke"></span>.icon-moon-stroke</div>
<div class="icons-holder"><span class="icon-move"></span>.icon-move</div>
<div class="icons-holder"><span class="icon-move-alt1"></span>.icon-move-alt1</div>
<div class="icons-holder"><span class="icon-move-alt2"></span>.icon-move-alt2</div>
<div class="icons-holder"><span class="icon-move-horizontal"></span>.icon-move-horizontal</div>
<div class="icons-holder"><span class="icon-move-horizontal-alt1"></span>.icon-move-horizontal-alt1</div>
<div class="icons-holder"><span class="icon-move-horizontal-alt2"></span>.icon-move-horizontal-alt2</div>
<div class="icons-holder"><span class="icon-move-vertical"></span>.icon-move-vertical</div>
<div class="icons-holder"><span class="icon-move-vertical-alt1"></span>.icon-move-vertical-alt1</div>
<div class="icons-holder"><span class="icon-move-vertical-alt2"></span>.icon-move-vertical-alt2</div>
<div class="icons-holder"><span class="icon-movie"></span>.icon-movie</div>
<div class="icons-holder"><span class="icon-new-window"></span>.icon-new-window</div>
<div class="icons-holder"><span class="icon-pause"></span>.icon-pause</div>
<div class="icons-holder"><span class="icon-pen"></span>.icon-pen</div>
<div class="icons-holder"><span class="icon-pen-alt2"></span>.icon-pen-alt2</div>
<div class="icons-holder"><span class="icon-pen-alt-fill"></span>.icon-pen-alt-fill</div>
<div class="icons-holder"><span class="icon-pen-alt-stroke"></span>.icon-pen-alt-stroke</div>
<div class="icons-holder"><span class="icon-pilcrow"></span>.icon-pilcrow</div>
<div class="icons-holder"><span class="icon-pin"></span>.icon-pin</div>
<div class="icons-holder"><span class="icon-play"></span>.icon-play</div>
<div class="icons-holder"><span class="icon-play-alt"></span>.icon-play-alt</div>
<div class="icons-holder"><span class="icon-plus"></span>.icon-plus</div>
<div class="icons-holder"><span class="icon-plus-alt"></span>.icon-plus-alt</div>
<div class="icons-holder"><span class="icon-question-mark"></span>.icon-question-mark</div>
<div class="icons-holder"><span class="icon-rain"></span>.icon-rain</div>
<div class="icons-holder"><span class="icon-read-more"></span>.icon-read-more</div>
<div class="icons-holder"><span class="icon-reload"></span>.icon-reload</div>
<div class="icons-holder"><span class="icon-reload-alt1"></span>.icon-reload-alt1</div>
<div class="icons-holder"><span class="icon-right-quote"></span>.icon-right-quote</div>
<div class="icons-holder"><span class="icon-right-quote-alt"></span>.icon-right-quote-alt</div>
<div class="icons-holder"><span class="icon-rss"></span>.icon-rss</div>
<div class="icons-holder"><span class="icon-rss-alt"></span>.icon-rss-alt</div>
<div class="icons-holder"><span class="icon-share"></span>.icon-share</div>
<div class="icons-holder"><span class="icon-spin"></span>.icon-spin</div>
<div class="icons-holder"><span class="icon-spin-alt"></span>.icon-spin-alt</div>
<div class="icons-holder"><span class="icon-star"></span>.icon-star</div>
<div class="icons-holder"><span class="icon-steering-wheel"></span>.icon-steering-wheel</div>
<div class="icons-holder"><span class="icon-stop"></span>.icon-stop</div>
<div class="icons-holder"><span class="icon-sun"></span>.icon-sun</div>
<div class="icons-holder"><span class="icon-sun-alt-fill"></span>.icon-sun-alt-fill</div>
<div class="icons-holder"><span class="icon-sun-alt-stroke"></span>.icon-sun-alt-stroke</div>
<div class="icons-holder"><span class="icon-tag-fill"></span>.icon-tag-fill</div>
<div class="icons-holder"><span class="icon-tag-stroke"></span>.icon-tag-stroke</div>
<div class="icons-holder"><span class="icon-target"></span>.icon-target</div>
<div class="icons-holder"><span class="icon-transfer"></span>.icon-transfer</div>
<div class="icons-holder"><span class="icon-trash-fill"></span>.icon-trash-fill</div>
<div class="icons-holder"><span class="icon-trash-stroke"></span>.icon-trash-stroke</div>
<div class="icons-holder"><span class="icon-umbrella"></span>.icon-umbrella</div>
<div class="icons-holder"><span class="icon-undo"></span>.icon-undo</div>
<div class="icons-holder"><span class="icon-unlock-fill"></span>.icon-unlock-fill</div>
<div class="icons-holder"><span class="icon-unlock-stroke"></span>.icon-unlock-stroke</div>
<div class="icons-holder"><span class="icon-upload"></span>.icon-upload</div>
<div class="icons-holder"><span class="icon-user"></span>.icon-user</div>
<div class="icons-holder"><span class="icon-volume"></span>.icon-volume</div>
<div class="icons-holder"><span class="icon-volume-mute"></span>.icon-volume-mute</div>
<div class="icons-holder"><span class="icon-wrench"></span>.icon-wrench</div>
<div class="icons-holder"><span class="icon-x"></span>.icon-x</div>
<div class="icons-holder"><span class="icon-x-alt"></span>.icon-x-alt</div>
</div>
						</div> <!-- .widget-content -->
						
					</div> <!-- .widget -->
					
					
					
				</div> <!-- .grid -->
				
				
				
			</div> <!-- .row -->
			
			
		</div> <!-- .container -->
		
	</div> <!-- #content -->
	
	<div id="topNav">
		 <ul>
		 	<li>
		 		<a href="#menuProfile" class="menu">John Doe</a>
		 		
		 		<div id="menuProfile" class="menu-container menu-dropdown">
					<div class="menu-content">
						<ul class="">
							<li><a href="javascript:;">Edit Profile</a></li>
							<li><a href="javascript:;">Edit Settings</a></li>
							<li><a href="javascript:;">Suspend Account</a></li>
						</ul>
					</div>
				</div>
	 		</li>
		 	<li><a href="javascript:;">Upgrade</a></li>
		 	<li><a href="index-2.html">Logout</a></li>
		 </ul>
	</div> <!-- #topNav -->
	
	<div id="quickNav">
		<ul>
			<li class="quickNavMail">
				<a href="#menuAmpersand" class="menu"><span class="icon-book"></span></a>		
				
						

				<div id="menuAmpersand" class="menu-container quickNavConfirm">
					<div class="menu-content cf">							
						
						<div class="qnc qnc_confirm">
							
							<h3>Confirm</h3>
					
							<div class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Confirm #1</span>
									<span class="qnc_preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
								
								<div class="qnc_actions">						
									<button class="btn btn-primary btn-small">Accept</button>
									<button class="btn btn-quaternary btn-small">Not Now</button>
								</div>
							</div>
							
							<div class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Confirm #2</span>
									<span class="qnc_preview">Duis aute irure dolor in henderit in voluptate velit esse cillum dolore.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
								
								<div class="qnc_actions">						
									<button class="btn btn-primary btn-small">Accept</button>
									<button class="btn btn-quaternary btn-small">Not Now</button>
								</div>
							</div>
							
							<div class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Confirm #3</span>
									<span class="qnc_preview">Duis aute irure dolor in henderit in voluptate velit esse cillum dolore.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
								
								<div class="qnc_actions">						
									<button class="btn btn-primary btn-small">Accept</button>
									<button class="btn btn-quaternary btn-small">Not Now</button>
								</div>
							</div>
							
							<a href="javascript:;" class="qnc_more">View all Confirmations</a>
															
						</div> <!-- .qnc -->	
					</div>
				</div>
			</li>
			<li class="quickNavNotification">
				<a href="#menuPie" class="menu"><span class="icon-chat"></span></a>
				
				<div id="menuPie" class="menu-container">
					<div class="menu-content cf">					
						
						<div class="qnc">
							
							<h3>Notifications</h3>
					
							<a href="javascript:;" class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Notification #1</span>
									<span class="qnc_preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
							</a>
							
							<a href="javascript:;" class="qnc_item">
								<div class="qnc_content">
									<span class="qnc_title">Notification #2</span>
									<span class="qnc_preview">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</span>
									<span class="qnc_time">3 hours ago</span>
								</div> <!-- .qnc_content -->
							</a>
							
							<a href="javascript:;" class="qnc_more">View all Confirmations</a>
							
						</div> <!-- .qnc -->
					</div>
				</div>				
			</li>
		</ul>		
	</div> <!-- .quickNav -->
	
	
</div> <!-- #wrapper -->

<div id="footer">
	Copyright &copy; 2012, MadeByAmp Themes.
</div>

<script src="javascripts/all.js"></script>

</body>
</html>